<template>
  <div class="home">
    <div class="hometitle"><h2>学生宿舍管理系统</h2></div>
    <div class="login">
      <h3>欢迎使用</h3>
      <el-form :model="form">
        <el-form-item>
          <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="code"
            style="width: 83%"
            placeholder="请输入验证码"
          ></el-input>
          <canvas
            id="canvas"
            width="96px"
            height="44px"
            @click="handleCanvas"
          ></canvas>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="form.type">
            <el-radio :label="0">管理员</el-radio>
            <el-radio :label="1">学生</el-radio>
            <el-radio :label="2">宿管</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import service from "@/request";
export default {
  data() {
    return {
      code: "",
      true_code: "",
      form: {},
      yanzheng_arr: [],
    };
  },
  mounted() {
    this.getcanvas(this.yanzheng_arr);
  },
  methods: {
  async login() {
    console.log(this.true_code)
      if (this.code == "") {
        this.$message.warning("验证码不能为空");
      }else if(this.code !==this.true_code) {
      this.code="";
      this.handleCanvas(this.yanzheng_arr)
        this.$message.warning("验证码输入错误");
      
   }   else {
        const res =await service.get("/sushe/login", {
          params: {
            name: this.form.name,
            password: this.form.password,
            type: this.form.type,
          },

        });
        console.log(res)
        window.localStorage.setItem('user',JSON.stringify(res.data[0]))
        this.$message.warning(res.msg)
        this.$router.push("/about")
      }
    },
    getcanvas(show_num) {
      var canvas_width = document.querySelector("#canvas").clientWidth;
      var canvas_height = document.querySelector("#canvas").clientHeight;
      var canvas = document.getElementById("canvas"); //获取到canvas
      var context = canvas.getContext("2d"); //获取到canvas画图
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //获取到数组的长度

      //4个验证码数
      for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        show_num[i] = txt.toLowerCase(); // 依次把取得的内容放到数组里面
        var x = 10 + i * 20; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      }
      //验证码上显示6条线条
      for (var i = 0; i <= 5; i++) {
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      //验证码上显示31个小点
      for (var i = 0; i <= 30; i++) {
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }

      //最后把取得的验证码数组存起来，方式不唯一
      var num = show_num.join("");
      // console.log(num);
      this.true_code = num;
        console.log(this.true_code)
    },

    randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },

    handleCanvas() {
      this.getcanvas(this.yanzheng_arr);
    },
  },
};
</script>
<style scoped>
.login h3 {
  text-align: center;
}
.login {
  width: 600px;
  height: auto;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
  margin: 60px auto;
}
.hometitle {
  background-color: #426374;
  width: 100%;
  height: 60px;
  padding: 0;
  line-height: 60px;
  color: white;
}

.home {
  width: 100%;
  height: 100%;
  background: url("@/assets/bg1.png") no-repeat;
  background-size: 100% 100%;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
</style>
